<template>
  <div>
    <el-button type="primary" icon="el-icon-circle-plus" @click="add()">添加标题</el-button>
    <el-table
      :data="titleMsg"
      stripe
      border
      style="width: 100%;margin-top: 10px">
      <el-table-column
        label="标题"
        align="center"
        prop="title">
      </el-table-column>
      <el-table-column
        label="标题类型"
        align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isIncome">应发工资</span>
          <span v-else>代扣代缴</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button round
                     @click="handleCheck(scope.$index, scope.row)" plain size="mini">详 情
          </el-button>
          <el-button round
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)" plain size="mini">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 10px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>

    <el-dialog :title="dialogTitle" @close='closeDialog' :visible.sync="showTitleMsg">
      <el-form
        size="mini"
        :model="itemMsg" label-width="120px" >
        <el-form-item label="标题:">
          <el-input  v-model="itemMsg.title"></el-input>
        </el-form-item>
        <el-form-item label="标题类型:">
          <el-radio v-model="itemMsg.isIncome" :label="true">应发工资</el-radio>
          <el-radio v-model="itemMsg.isIncome" :label="false">代扣代缴</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTitleMsg = false">取 消</el-button>
        <el-button type="primary" @click="updateMsg()" v-if="type == 0">修 改</el-button>
        <el-button type="primary" @click="addMsg()" v-else>增 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {titleList,titleSave,titleUpdate,titleDelete} from '../../axios/api'
    export default {
        name: "titleType",
        data(){
            return{
                showTitleMsg:false,
                titleMsg:[
                    {
                        "id": "1",
                        "title": "岗位工资职务工资",
                        "isIncome": true
                    },
                    {
                        "id": "2",
                        "title": "级别工资",
                        "isIncome": true
                    },
                    {
                        "id": "3",
                        "title": "技术等级工资",
                        "isIncome": true
                    },
                    {
                        "id": "4",
                        "title": "交通补贴",
                        "isIncome": true
                    },
                    {
                        "id": "5",
                        "title": "工改保留津贴",
                        "isIncome": true
                    },
                    {
                        "id": "6",
                        "title": "警衔津贴",
                        "isIncome": true
                    },
                    {
                        "id": "7",
                        "title": "工作津贴",
                        "isIncome": true
                    },
                    {
                        "id": "8",
                        "title": "生活补贴",
                        "isIncome": true
                    },
                    {
                        "id": "9",
                        "title": "执勤津贴",
                        "isIncome": true
                    },
                    {
                        "id": "10",
                        "title": "回维补贴及卫生费",
                        "isIncome": true
                    }
                ],
                total:0,
                dialogTitle:"添加标题",
                type:1,//0为修改，1为添加
                itemMsg:{
                    id:0,
                    title:"",
                    isIncome:true
                },
                page:1
            }
        },
        mounted() {
            this.getMsg(1,10)
        },
        methods:{
            getMsg:async function(page,limit){
                let data = {
                    page:page,
                    limit:limit
                };
                let res = await titleList(data);
                if (res.code === 0){
                  this.titleMsg = res.data.list;
                  this.total = res.data.totalCount;
                }
            },
            handleCheck(index,row){
                console.log(row)
                this.dialogTitle = "修改标题";
                this.type = 0;
                this.itemMsg = row;
                this.showTitleMsg = true;
            },
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该标题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMsg(row.id);
                }).catch(() => {

                });
            },
            deleteMsg:async function(id){
              let data = {id:id};
              let res = await titleDelete(data);
              if (res.code == 0){
                  this.alert("success",'删除成功!');
                  this.getMsg(this.page,10);
              }
            },
            handleCurrentChange(index){
              this.page = index;
              this.getMsg(index,10)
            },
            closeDialog(){
                this.itemMsg = {
                    title:"",
                    isIncome:true
                };
            },
            add(){
                this.dialogTitle = "添加标题";
                this.type = 1;
                this.showTitleMsg = true;
            },
            updateMsg:async function(){
                if (this.itemMsg.title === ""){
                    this.alert("warning","请填写标题！");
                    return;
                }
                let res = await titleUpdate(this.itemMsg);
                if (res.code === 0){
                    this.alert("success","修改成功");
                    this.getMsg(this.page,10)
                }
            },
            addMsg:async function(){
                if (this.itemMsg.title === ""){
                    this.alert("warning","请填写标题！");
                    return;
                }
                let data = {
                    title:this.itemMsg.title,
                    isIncome:this.itemMsg.isIncome
                };
                let res = await titleSave(data);
                if (res.code === 0){
                    this.alert("success","添加成功");
                    this.getMsg(this.page,10)
                }
            }
        }
    }
</script>

<style scoped>

</style>
